var boardSize=15;
var pieceCount=0;
var isMyTurn;
var isMyColorWhite;
var pendingX;
var pendingY;
var pieces;
var gameBoardSize=450;
var gameBoardCellSize=30;
var pieceSize;
var resultDialog;

$(document).ready(function(){          
    $.getJSON("?request=isMyTurn",function(data){        
        isMyTurn=data;
        if(isMyTurn){
            isMyColorWhite=false;
        }else{
            isMyColorWhite=true;
        }
    }); 
    ajaxCall();
    setInterval( "ajaxCall()", 1000 );    
    initializeResultDialog();
});

function initializeResultDialog(){
    resultDialog =  $("#game_result_dialog_form").
    dialog({
        draggable: false,
        autoOpen: false,
        title: 'Result',
        modal: true,
        resizable: false,        
        width: 'auto',
        buttons: [
        {
            text: "Ok",            
            click: function(){                
                window.location='?request=index';
                $(this).dialog('close');                
            }
        }
        ]   
    });
}

function getCrossBrowserClickCord(e){
    var evt = e ? e:window.event;
    var clickX=0, clickY=0;
    if ((evt.clientX || evt.clientY) &&
        document.body &&
        document.body.scrollLeft!=null) {
        clickX = evt.clientX + document.body.scrollLeft;
        clickY = evt.clientY + document.body.scrollTop;
    }
    if ((evt.clientX || evt.clientY) &&
        document.compatMode=='CSS1Compat' && 
        document.documentElement && 
        document.documentElement.scrollLeft!=null) {
        clickX = evt.clientX + document.documentElement.scrollLeft;
        clickY = evt.clientY + document.documentElement.scrollTop;
    }
    if (evt.pageX || evt.pageY) {
        clickX = evt.pageX;
        clickY = evt.pageY;
    }    
    return new Array(clickX,clickY);
}

function gameBoardClickHandle(e){
    if(isMyTurn){
        var clickCords=getCrossBrowserClickCord(e);        
        var gameBoardTop = document.getElementById("gameBoard").offsetTop;
        var gameBoardLeft = document.getElementById("gameBoard").offsetLeft;        
        var gameBoardClickX=clickCords[0]-gameBoardLeft;
        var gameBoardClickY=clickCords[1]-gameBoardTop;    
        var x=Math.floor(gameBoardClickX/gameBoardCellSize);
        var y=Math.floor(gameBoardClickY/gameBoardCellSize);
   
        $.get("?request=play&x="+x+"&y="+y,
            function(data){
                processMyPlayData(data,x,y);
            });           
    }
}

function ajaxCall(){    
    if(!isMyTurn){
        $.getJSON("?request=opponentPlay",function(data){        
            processOpponentPlayData(data);
        });           
    }
}

function processOpponentPlayData(data){
    if(data!=null){        
        createPiece(data.x, data.y);
        switch(data.state){
            case "BLACK_WON":
                $('#gameResult').html('Black won the game.');                   
                resultDialog.dialog('open');
                break;
            case "WHITE_WON":
                $('#gameResult').html('White won the game.');                                
                resultDialog.dialog('open');
                break;
            case "DRAW":
                $('#gameResult').html('Draw');                
                resultDialog.dialog('open');
                break;            
        }        
        isMyTurn=true;
    }    
}

function processMyPlayData(data,x,y){    
    if(data!=null){        
        createPiece(x, y);        
        switch(data){
            case "BLACK_WON":
                $('#gameResult').html('Black won the game.');                
                resultDialog.dialog('open');
                break;
            case "WHITE_WON":
                $('#gameResult').html('White won the game.');                                
                resultDialog.dialog('open');
                break;
            case "DRAW":
                $('#gameResult').html('Draw');
                resultDialog.dialog('open');
                break;                      
        }        
        isMyTurn=false;
    }
}

function createPiece(x,y){    
    var piece=document.createElement("img");        
    piece.setAttribute("id", "piece"+pieceCount);
    pieceCount++;
    piece.style.position="absolute";    
    piece.style.width=gameBoardCellSize+"px";
    piece.style.height=gameBoardCellSize+"px";
    piece.style.top=y*gameBoardCellSize+"px";
    piece.style.left=x*gameBoardCellSize+"px";
    if(isMyTurn)
        if(isMyColorWhite){
            piece.setAttribute("src", "images/renjuPieceWhite.png");            
        } else{
            piece.setAttribute("src", "images/renjuPieceBlack.png");                
        }
    else{ 
        if(isMyColorWhite){
            piece.setAttribute("src", "images/renjuPieceBlack.png");           
        }
        else{
            piece.setAttribute("src", "images/renjuPieceWhite.png");                
        }
    }
    var gameBoard=document.getElementById("gameBoard");
    gameBoard.appendChild(piece);           
}

